<style scoped>
[v-cloak] {
  display: none;
}
.picscreen {
  position: relative;
}

.picbg {
  background-image: url("../../assets/images/projectlist_1.jpg");
  background-size: cover;
  position: absolute;
  height: 100px;
  width: 100%;
  background-color: #8b8b8b;
  top: -15px;
  left: 0;
}

.pictitle {
  font-size: 1.4rem;
  font-family: Georgia, sans-serif, serif;
}

.picdesc {
  font-size: 0.9rem;
  display: block;
}

.picTag {
  margin-right: 30px;
  background-color: #608ebded;
  color: white;
  padding: 5px;
  cursor: pointer;
  /*border: 1px solid #e8eaec;*/
  border-radius: 4px;
}

.project-input {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 3%;
  width: 400px;
}

.search-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  /* font-size: 0.5rem; */
  width: 100px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
}

.project-start-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  right: 20px;
  position: absolute;
  /* font-size: 0.5rem; */
  border-radius: 6px;
  width: 150px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

/*Tabs--style*/
.tabs {
  min-height: 500px;
  border-top: 1px solid lightgrey;
}

.tabpane-syle {
  font-size: 20px;
  background-color: rgba(133, 115, 92, 0.1);
  min-height: 500px;
}

.ivu-tabs-bar {
  /*border-bottom: 1px solid #dddee1;*/
  margin-bottom: 0px;
}

.ivu-tabs-nav-wrap {
  text-align: center;
  margin-bottom: 0px;
}

.ivu-tabs-nav-scroll {
  margin-left: 5%;
}

.ivu-tabs-tab {
  font-size: 16px;
  font-weight: bold;
}

.ivu-row {
  margin-bottom: 45px;
}

.pro-page {
  left: 43%;
  font-size: 14px;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
}

.projectTitle {
  height: 16px;
  line-height: 15px;
  font-size: 16px;
  max-width: 70%;
  padding-left: 5px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardicon {
  height: 15px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
</style>

<template>
  <div id="vueBody" v-cloak style="min-width: 1100px">
    <el-input
      class="project-input"
      placeholder="输入作品名称..."
      v-model="searchText"
      clearable
      @keyup.enter.native="search"
      @clear="showPageList(1)"
    ></el-input>
    <el-button class="search-btn" @click="search">搜索</el-button>
    <el-button
      class="project-start-btn"
      @click="newProject"
      type="default"
      v-if="this.userInfo.role == 'admin'"
      >添加作品</el-button
    >
    <div class="tabs">
      <Row :style="{ minHeight: contentMinHeight + 'px' }">
        <i-col>
          <div class="pro-content">
            <div v-if="projectList != undefined && projectList.length > 0">
              <div
                class="projectCard"
                v-for="item in projectList"
                :key="item.id"
                style="height: 90%; width: 95%; margin-right: 5%"
              >
                <i-col
                  :sm="{ span: 5, offset: 1 }"
                  :md="{ span: 5, offset: 1 }"
                  :lg="{ span: 3, offset: 1 }"
                >
                  <div @click="checkUserState(item)" style="cursor: pointer">
                    <Card style="height: auto; margin: 15px -15px">
                      <!-- title-->
                      <span slot="title" class="projectTitle" :title="item.workName">{{
                        item.workName
                      }}</span>

                      <!-- 右上角的button-->
                      <div
                        class="operate"
                        slot="extra"
                        style="display: flex; align-items: center"
                      >
                        <Icon
                          type="md-person"
                          :size="20"
                          title="Managed or joined project"
                          :id="item.aid"
                        ></Icon>
                      </div>
                      <!--  description-->
                      <div style="display: flex; align-items: center; height: 10px">
                        <strong style="text-align: center; min-width: 45px"
                          >简介：</strong
                        >
                        <p
                          style="
                            padding: 0 5px;
                            word-break: break-word;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            max-width: 180px;
                            height: 20px;
                          "
                          :title="item.description"
                        >
                          {{ item.description }}
                        </p>
                      </div>
                      <!-- avatar-->
                      <div
                        style="
                          height: 180px;
                          display: flex;
                          justify-content: center;
                          margin-top: 10px;
                        "
                      >
                        <img
                          :src="dataSever + item.thumbnail"
                          v-if="item.thumbnail != null && item.type == 'Image'"
                        />
                        <img
                          :src="dataSever + item.url"
                          v-else-if="item.url != null && item.type == 'Image'"
                        />
                        <img
                          :src="dataSever + item.thumbnail"
                          v-else-if="item.thumbnail != null && item.type == 'Video'"
                        />
                        <avatar
                          :username="item.workName"
                          :size="180"
                          :title="item.workName"
                          :rounded="false"
                          v-else
                        ></avatar>
                      </div>
                      <div class="cardicon">
                        <Icon type="md-clock" :size="15" Time></Icon>
                        <span
                          style="
                            height: 20px;
                            margin-left: 5%;
                            display: inline-block;
                            width: 45%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          :title="filterTimeStyle(item.createTime)"
                        >
                          <strong>{{ item.createTime.split("T")[0] }}</strong>
                        </span>
                        <Icon
                          type="md-pricetags"
                          :size="15"
                          Tags
                          style="margin-left: 5px"
                        ></Icon>
                        <strong
                          style="
                            margin-left: 5%;
                            height: 20px;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          :title="item.type"
                        >
                          {{ item.type }}
                        </strong>
                      </div>
                    </Card>
                  </div>
                </i-col>
              </div>
            </div>
            <div v-else>
              <i-col span="22" offset="1">
                <Card
                  :bordered="false"
                  style="min-height: 350px; margin-top: 3%"
                  dis-hover
                >
                  <div style="display: flex; justify-content: center">
                    <Icon type="md-alert" size="40" color="gray"></Icon>
                  </div>
                  <br />
                  <div style="display: flex; justify-content: center">
                    <h2 style="text-align: center; width: 50%">
                      暂无内容, 请联系管理员上传。
                    </h2>
                  </div>
                  <br />
                  <div style="display: flex; justify-content: center">
                    <h4 style="text-align: center; width: 50%; color: lightblue">
                      You can click the button right top to add a new project.
                      <br />Enriching your description of the project and attracting more
                      people to join in.
                    </h4>
                  </div>
                </Card>
              </i-col>
            </div>
          </div>
        </i-col>
      </Row>
      <div class="pro-page">
        <Page
          ref="pages"
          :total="totalCount"
          :page-size="pageSize"
          :current="currentPage"
          size="small"
          @on-change="changePage"
          show-elevator
          show-total
        ></Page>
      </div>
    </div>
    <Modal
      v-model="projectInfoModal"
      title="作品信息"
      width="800px"
      class="projectInfoModal"
    >
      <i-table
        stripe
        border
        :columns="columns"
        :data="projectDetailInfo"
        :show-header="false"
      ></i-table>
      <div slot="footer">
        <i-button type="warning" title="Enter the project and check it" @click="go2login"
          >登录
        </i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Avatar from "vue-avatar";
import { get, post, del, put } from "@/axios";

export default {
  data() {
    return {
      // projectList: [
      //   {
      //     aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
      //     name: "遥感影像识别",
      //     description: "地信21级03班",
      //     purpose: "Data visualization",
      //     creator: "zhaoym",
      //     members: [
      //       { role: "manager", userId: "0743e9c0-6f02-411c-8b5c-0fcdccaf2eaf" },
      //       { role: "expert", userId: "01422e09-9fe3-40ea-a777-5aa6d7c0a696" },
      //     ],
      //     type: "Activity_Group",
      //     parent: null,
      //     children: [
      //       "31344a34-18fa-4e72-978c-a8ed8d25df59",
      //       "fd9b0114-5016-4417-bf3a-a73dafa95b76",
      //       "220c1ed9-8297-465c-9b7f-5ea467237a12",
      //       "c4dc1e23-f965-45df-b1ad-cff1e20ffae8",
      //     ],
      //     permission:
      //       '{"observe":{"manager":null,"coreteam":null,"widerteam":null,"visitor":"No"},"auto_join":{"manager":null,"coreteam":null,"widerteam":null,"visitor":"No"},"edit_info":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"invite_member":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"manage_member":{"manager":true,"coreteam":false,"widerteam":false,"visitor":null},"create_task":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"manage_task":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"upload_resource":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"use_resource":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"manage_resource":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"manage_workspace_type":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null},"import_tool":{"manager":true,"coreteam":true,"widerteam":false,"visitor":null},"use_tool":{"manager":true,"coreteam":true,"widerteam":true,"visitor":null},"manage_tool":{"manager":true,"coreteam":false,"widerteam":false,"visitor":null},"manage_child_activity":{"manager":true,"coreteam":false,"widerteam":true,"visitor":null}}',
      //     level: 0,
      //     createdTime: "2021-06-21 10:18:34",
      //     activeTime: "2021-10-30 14:18:04",
      //     toolList: null,
      //     privacy: "Public",
      //     tag: "GIS \u0026 RS",
      //     picture: require('@/assets/images/works/RS.jpg'),
      //     category: "Educational",
      //     isMember: false,
      //     isManager: false,
      //   },
      //   {
      //     aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
      //     name: "中国气象地图",
      //     description: "中国气象地图",
      //     creator: "张三",
      //     createdTime: "2021-08-09 10:18:34",
      //     activeTime: "2021-10-30 14:18:04",
      //     toolList: null,
      //     privacy: "Public",
      //     tag: "气象",
      //     picture: "",
      //     category: "Educational",
      //     isMember: true,
      //     isManager: false,
      //   },
      //   {
      //     aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
      //     name: "土地利用变化模拟",
      //     description: "探讨ANN-CA模型是否能够用于模拟多种土地用途之间转换的情景，以为有关规划及管理提供支持",
      //     creator: "李四",
      //     createdTime: "2021-08-09 10:18:34",
      //     activeTime: "2021-10-30 14:18:04",
      //     toolList: null,
      //     privacy: "Public",
      //     tag: "GIS",
      //     picture: require('@/assets/images/works/land.png'),
      //     category: "Educational",
      //     isMember: true,
      //     isManager: false,
      //   },
      //   {
      //     aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
      //     name: "水文模拟",
      //     description: "流域水文模拟是对流域上发生的水文过程进行模拟。建成数学模型,在计算机上实现。",
      //     creator: "王五",
      //     createdTime: "2021-08-09 10:18:34",
      //     activeTime: "2021-10-30 14:18:04",
      //     toolList: null,
      //     privacy: "Public",
      //     tag: "水文，GIS",
      //     picture: require('@/assets/images/works/water.png'),
      //     category: "Educational",
      //     isMember: false,
      //     isManager: false,
      //   },
      //   {
      //     aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
      //     name: "森林模拟-研究湖南株洲杉树生长情况",
      //     description: "21级地图学优秀作业四",
      //     createdTime: "2021-08-09 10:18:34",
      //     activeTime: "2021-10-30 14:18:04",
      //     toolList: null,
      //     privacy: "Public",
      //     tag: "森林，DBH",
      //     picture: require('@/assets/images/works/forest.png'),
      //     category: "Educational",
      //     isMember: false,
      //     isManager: false,
      //   },
      //   {
      //     aid: "131e2ec5-a09f-4892-ae02-02c94e9d0e63",
      //     name: "地图学课程优秀作业",
      //     description: "21级地图学优秀作业一",
      //     createdTime: "2021-08-09 10:18:34",
      //     activeTime: "2021-10-30 14:18:04",
      //     toolList: null,
      //     privacy: "Public",
      //     tag: "地图学",
      //     picture: "",
      //     category: "Educational",
      //     isMember: false,
      //     isManager: false,
      //   },
      // ],
      projectList: [],
      projectType: [],
      currentTab: "All",
      //初始化信息总条数
      //projectCount:10,
      contentMinHeight: 0,
      currentPage: 1,
      totalCount: 0,
      //每页显示多少条
      pageSize: 12,
      tabPageData: this.projectList,

      // user
      userInfo: [],
      userState: false,
      freshEle: 0,
      searchText: "",
      selectTag: "",
      projectDetailInfo: [],
      columns: [
        { title: "Key", key: "key", width: "148px" },
        { title: "Value", key: "value", width: "618px" },
      ],
      projectInfoModal: false,
      selectedProjectInfo: {},
      searchFinished: false,
      dataSever: "",
    };
  },
  components: {
    Avatar,
  },
  created() {},
  mounted() {
    this.resizeContent();
    //判断用户状态，如果登录，判断project权限，如果否，不判断
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.dataSever = this.$store.getters.dataSever;
    if (this.userInfo != null && this.userInfo.userState) {
      this.userState = true;
    } else {
      this.userState = false;
      // this.judgeMember(projectsInfo.projectList);
      // this.tabPageData = Object.assign([], projectsInfo.projectList);
      this.freshEle++;
    }
    this.showPageList(1);
    // window.onresize = () => {
    //   return (() => {
    //     // this.$refs.navigationEl.identityMenuCSS();
    //     this.resizeContent();
    //   })();
    // };
  },
  methods: {
    resizeContent() {
      this.contentMinHeight = window.innerHeight - 320;
    },
    checkUserState(item) {
      let userState = this.$store.getters.userState;
      if (userState) {
        this.$router.push({
          path: "projectInfo/" + item.id + "?content=info",
        });
      } else {
        this.projectInfoModalShow(item);
      }
    },
    projectInfoModalShow(projectInfo) {
      this.selectedProjectInfo = Object.assign({}, projectInfo);

      this.projectDetailInfo = [
        {
          key: "作品类别",
          value: projectInfo.type,
        },
        {
          key: "作品名称",
          value: projectInfo.workName,
        },
        {
          key: "作品描述",
          value: projectInfo.description,
        },
        {
          key: "作品作者",
          value: projectInfo.uploaderName,
        },
        {
          key: "上传时间",
          value: projectInfo.createTime.split("T")[0],
        },
      ];
      this.projectInfoModal = true;
    },
    changePage(index) {
      this.currentPage = index;
      this.showPageList(index);
    },
    async search() {
      this.currentPage = 1;
      if (this.searchText == "") {
        this.showPageList(1);
      } else {
        let reqInfo = {
          asc: false,
          page: this.currentPage - 1,
          pageSize: this.pageSize,
          // sortField: "workName",
          searchField: "workName",
          searchText: this.searchText,
        };
        let that = this;
        try {
          let res = await post("/visualResourceLibrary/work/s", reqInfo);
          // console.log(res);
          this.projectList = [];
          this.totalCount = res.data.total;
          for (let i = 0; i < res.data.content.length; i++) {
            this.projectList.push(res.data.content[i]);
          }
          that.searchFinished = true;
        } catch (e) {
          console.log(e);
        }
      }
    },

    async showPageList(index) {
      let reqInfo = {
        asc: false,
        page: index - 1,
        pageSize: this.pageSize,
      };
      try {
        let res = await get(
          "/visualResourceLibrary/work/" + reqInfo.page + "/" + reqInfo.pageSize
        );
        // console.log(res);
        this.projectList = [];
        this.totalCount = res.data.total;
        this.currentPage = index;
        for (let i = 0; i < res.data.content.length; i++) {
          this.projectList.push(res.data.content[i]);
        }
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    newProject() {
      if (this.userState == false) {
        this.$router.push({ name: "Login" });
      } else {
        this.$router.push({ name: "newProject" });
      }
    },
    sendMessage(data) {
      //父子组件传值，然后使用refs调用导航栏中内容
      this.$refs.navigationEl.sendMessage(data);
    },
    filterTimeStyle(time) {
      return (str = new Date(str).toLocaleString());
    },
    go2login() {
      this.$router.push("login");
    },
  },
};
</script>
